<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Test Page.</title>
</head>
<script src="js/jquery.min.js"></script>
<body>
<h1>Hello Word.</h1>
<br/>
<br/>
<button id="bnt">发送信息</button>
<br/>
<br/>
<label for="msg"></label><input type="text" id="msg">
<br/>
<br/>
<div id="txt" style="border: 1px blue solid;">
    
</div>

</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="js/util.js"></script>
<script type="text/javascript">
        console.log("v1.0.7")
    function getQueryString(name){
        const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        const r = window.location.search.substr(1).match(reg);
        if (r!=null) return r[2];else return'';
    }

    const key = {
        userKey : 'USER_KEY'
    };

    $(function (){

        let nickname = myUtil.get(key.userKey);

        if (nickname == null) {
            alert("检测到您未登录请先登录！");
            nickname = prompt("请输入你的用户名");
            let password = prompt("请输入你的用密码");
            myUtil.set(key.userKey, nickname);
            myUtil.set(nickname, password);
        } else {
            let nickname = myUtil.get(key.userKey);
            let password = myUtil.get(nickname);
        }


        let isLock = false;
        $('#bnt').click(function () {

            let val = $('#msg').val();

            console.log(val);
            if (val == '' || val == null) {
                return;
            }

            if (isLock === true) {
                alert("禁止刷屏");
                return;
            }

            setTimeout(function () {
                isLock = false;
            },3000);

            index.send(nickname +":      "+ val);
            console.log("你发送了："+val);
            $('#msg').val("");
            // $('#txt').append("你发送了："+val + "<br/>");
            isLock = true;
        });


        setInterval(function () {
            index.send("heart:" + nickname);
        },30000)

        var socket;

        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {

            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于
            index = new WebSocket("ws://47.104.159.112/websocket/"+nickname);
            // index = new WebSocket("ws://localhost:8000/websocket/"+nickname);
            //socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
            //打开事件
            index.onopen = function () {
                console.log("Socket 已打开");
                $('#txt').append("连接成功：" + nickname + ", IP :" + returnCitySN["cip"]+','+returnCitySN["cname"] + "<br/>");
                index.send( nickname + "已上线, IP :" + returnCitySN["cip"]+','+returnCitySN["cname"] + "<br/>" );
            };
            //获得消息事件
            index.onmessage = function (msg) {
                console.log(msg.data);
                $('#txt').append(msg.data + "<br/>");
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            index.onclose = function () {
                console.log("Socket已关闭");
                $('#txt').append("链接关闭" + "<br/>");
                index.send( nickname + "已退出, IP :" + returnCitySN["cip"]+','+returnCitySN["cname"] + "<br/>" );
                // 尝试重新链接
                setInterval(function () {
                    index = new WebSocket("ws://47.104.159.112/websocket/"+nickname);
                },30000)
            };
            //发生了错误事件
            index.onerror = function () {
                alert("Socket发生了错误");
                //此时可以尝试刷新页面
                $('#txt').append("链接错误" + "<br/>");

                // 尝试重新链接
                setInterval(function () {
                    index = new WebSocket("ws://47.104.159.112/websocket/"+nickname);
                },30000)

            }
        }


        document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];

            if(e && e.keyCode===13){ // enter 键
                //要做的事情
                $('#bnt').click();
            }
        };

    });

    
</script>

</html>